<template>
  <div>
    <Modal :mask-closable="false" title="图例说明" v-model="modelShow" width="740">
      <div style="overflow-y: auto">
        <div>
          <img :src="imgInfo" />
        </div>
        <div
          style="
            width: 100%;
            text-align: center;
            color: #0e82cb;
            font-weight: bold;
            font-size: 16px;
            margin-top: 10px;
          "
        >
          当前细纱品种与颜色对应表
        </div>
        <div class="flex flex-left-justify flex-wrap ivu-mt-8">
          <div
            class="pingZhonItem"
            :style="{ background: item.materialColor }"
            v-for="(item, index) in pingZhonList"
            :key="index"
          >
            {{ item.materialName }}
          </div>
        </div>
      </div>

      <template v-slot:footer>
        <div> </div>
      </template>
    </Modal>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { getGongXuAndWuLiaoBiao } from '@/api/gongGongChaXun'
  import imgInfo from '@/assets/images/图例说明2.0.png'

  const modelShow = ref(false)
  const pingZhonList = ref(null)

  // const show = () => {
  //   modelShow.value = !modelShow.value
  // }
  const getGongXuAndWuLiaoBiaoData = () => {
    getGongXuAndWuLiaoBiao('细纱').then((res) => {
      pingZhonList.value = res
    })
  }

  onMounted(() => {
    getGongXuAndWuLiaoBiaoData()
  })
</script>
<style lang="scss">
  .pingZhonItem {
    min-width: 150px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    color: #ffffff;
    margin: 5px 10px;
    padding: 0px 10px;
  }
</style>
